<!--
 * @Author: luoyuxiang 398165@qq.com
 * @Date: 2025-03-06 22:50:24
 * @LastEditors: luoyuxiang 398165@qq.com
 * @LastEditTime: 2025-03-24 00:42:40
 * @FilePath: \formula-syn-vue\src\views\project\tcm\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- 搜索类型 -->
        <el-form-item label="搜索类型">
          <el-select
            v-model="queryParams.searchType"
            placeholder="请选择搜索类型"
            style="width: 100px"
          >
            <el-option label="全部" :value="0" />
            <el-option label="关键词" :value="1" />
            <el-option label="标题" :value="2" />
            <el-option label="作者" :value="3" />
            <el-option label="摘要" :value="4" />
          </el-select>
        </el-form-item>

        <!-- 搜索词 -->
        <el-form-item label="搜索词">
          <el-input v-model="queryParams.searchWords" placeholder="请输入搜索词" />
        </el-form-item>

        <!-- 名称 -->
        <el-form-item label="名称">
          <el-input v-model="queryParams.name" placeholder="请输入名称" />
        </el-form-item>

        <!-- 加减 -->
        <el-form-item label="加减">
          <el-input v-model="queryParams.addSubtract" placeholder="请输入加减" />
        </el-form-item>

        <!-- 病名 -->
        <el-form-item label="病名">
          <el-input v-model="queryParams.disease" placeholder="请输入病名" />
        </el-form-item>

        <!-- 症状 -->
        <el-form-item label="症状">
          <el-input v-model="queryParams.symptom" placeholder="请输入症状" />
        </el-form-item>

        <!-- 对证 -->
        <el-form-item label="对证">
          <el-input v-model="queryParams.syndrome" placeholder="请输入对证" />
        </el-form-item>

        <!-- 药效 -->
        <el-form-item label="药效">
          <el-input v-model="queryParams.physiologica" placeholder="请输入药效" />
        </el-form-item>

        <!-- 病因病机 -->
        <el-form-item label="病因病机">
          <el-input v-model="queryParams.etiolog" placeholder="请输入病因病机" />
        </el-form-item>

        <!-- 原始文本 -->
        <el-form-item label="原始文本">
          <el-input v-model="queryParams.originalText" placeholder="请输入原始文本" />
        </el-form-item>

        <!-- 组成 -->
        <el-form-item label="组成">
          <el-input v-model="queryParams.composition" placeholder="请输入组成" />
        </el-form-item>

        <!-- 查询范围 -->
        <el-form-item label="查询范围">
          <el-select v-model="queryParams.scope" placeholder="请选择查询范围" style="width: 100px">
            <el-option label="全部" :value="0" />
            <el-option label="我的" :value="1" />
            <el-option label="他人" :value="2" />
          </el-select>
        </el-form-item>

        <!-- 是否共享 -->
        <el-form-item label="是否共享">
          <el-select
            v-model="queryParams.isShared"
            placeholder="请选择是否共享"
            style="width: 100px"
          >
            <el-option label="全部" :value="0" />
            <el-option label="未共享" :value="1" />
            <el-option label="已共享" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon><Search /></template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon><Refresh /></template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="flex-x-between mb-10px">
        <div>
          <el-button v-hasPerm="['project:tcm:shared']" type="success" @click="handleShared()">
            <template #icon><Plus /></template>
            分享
          </el-button>
          <el-button
            v-hasPerm="['project:tcm:delete']"
            type="danger"
            :disabled="removeIds.length === 0"
            @click="handleDelete()"
          >
            <template #icon><Delete /></template>
            删除
          </el-button>
        </div>
        <div>
          <el-button
            v-hasPerm="['project:tcm:add']"
            type="success"
            :disabled="removeIds.length === 0"
            @click="handleComparisonOpenDialog()"
          >
            <template #icon><Plus /></template>
            对比
          </el-button>
        </div>
      </div>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          key="titleCn"
          label="文章名称"
          prop="titleCn"
          min-width="350"
          align="center"
        >
          <template #default="scope">
            <span class="clickable-title" @click="handleTitleClick(scope.row)">
              {{ scope.row.titleCn }}
            </span>
          </template>
        </el-table-column>
        <el-table-column key="name" label="处方名称" prop="name" min-width="150" align="center" />
        <el-table-column
          key="composition"
          label="组成"
          prop="composition"
          min-width="800"
          align="center"
        />
        <el-table-column key="name" label="用户名" prop="username" min-width="100" align="center" />
        <el-table-column
          key="isShared"
          label="是否共享"
          prop="isShared"
          min-width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.isShared == 0" type="info">否</el-tag>
            <el-tag v-if="scope.row.isShared == 1" type="primary">是</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          key="addSubtract"
          label="加减"
          prop="addSubtract"
          min-width="800"
          align="center"
        />
        <el-table-column
          key="disease"
          label="西医病名"
          prop="disease"
          min-width="350"
          align="center"
        />
        <el-table-column
          key="diseaseCn"
          label="中医病名"
          prop="diseaseCn"
          min-width="350"
          align="center"
        />
        <el-table-column key="symptom" label="症状" prop="symptom" min-width="800" align="center" />
        <el-table-column
          key="syndrome"
          label="对证"
          prop="syndrome"
          min-width="800"
          align="center"
        />
        <el-table-column
          key="physiologica"
          label="药效"
          prop="physiologica"
          min-width="800"
          align="center"
        />
        <el-table-column
          key="etiolog"
          label="病因病机"
          prop="etiolog"
          min-width="800"
          align="center"
        />

        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              v-hasPerm="['project:tcm:edit']"
              type="primary"
              size="small"
              link
              @click="handleOpenDialog(scope.row)"
            >
              <template #icon><Edit /></template>
              编辑
            </el-button>
            <el-button
              v-hasPerm="['project:tcm:delete']"
              type="danger"
              size="small"
              link
              @click="handleDelete(scope.row.id)"
            >
              <template #icon><Delete /></template>
              删除
            </el-button>

            <el-button
              v-hasPerm="['project:compose:query']"
              type="primary"
              size="small"
              link
              @click="handleComposeOpenDialog(scope.row.id)"
            >
              <template #icon><Edit /></template>
              药味
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery()"
      />
    </el-card>

    <!--药味 -->
    <ComposeDetail ref="composeDetailRef" />
    <!-- 对比 -->
    <Comparison ref="comparisonRef" />

    <!-- ArtcleInfo 组件 -->
    <ArticleInfo
      ref="articleInfoRef"
      :id="articleId"
      :visible="dialogArticleVisible"
      @close="dialogArticleVisible = false"
    ></ArticleInfo>

    <TcmEidt
      ref="tcmEidtRef"
      :id="dialog.id"
      :articleId="dialog.articleId"
      :articleTitle="dialog.title"
      :visible="dialog.visible"
      @close="dialog.visible = false"
      @resetQuery="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import TcmAPI, { TcmPageVO, TcmForm, TcmPageQuery } from "@/api/project/tcm";
import ArticleInfo from "../components/ArticleInfo.vue";
import TcmEidt from "../components/TcmEidt.vue";
import ComposeDetail from "../components/ComposeDetail.vue";
import Comparison from "../components/Comparison.vue";
const queryParams = reactive<TcmPageQuery>({
  pageNum: 1,
  pageSize: 10,
  searchType: 0, // 搜索类型
  searchWords: "", // 搜索词
  name: "", // 名称
  addSubtract: "", // 加减
  disease: "", // 病名
  symptom: "", // 症状
  syndrome: "", // 对证
  physiologica: "", // 药效
  etiolog: "", // 病因病机
  originalText: "", // 原始文本
  composition: "", // 组成
  scope: 0, // 查询范围
  isShared: 0, // 是否共享
  username: "", // 用户
});

// 中医处方表格数据
const pageData = ref<TcmPageVO[]>([]);
const loading = ref(false);
const removeIds = ref<number[]>([]);
const total = ref(0);
const comparisonRef = ref();
const queryFormRef = ref(ElForm);
const articleInfoRef = ref();
const articleId = ref(0);
const dialogArticleVisible = ref(false);
const composeDetailRef = ref();

// 打开详情弹窗
function handleTitleClick(row: any) {
  articleId.value = row.articleId;
  dialogArticleVisible.value = true;
}

/** 查询中医处方 */
function handleQuery() {
  dialog.visible = false;
  loading.value = true;
  TcmAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 打开详情弹窗
function handleComposeOpenDialog(id: number) {
  composeDetailRef.value.openDetail(id);
}

/** 重置中医处方查询 */
function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

function handleComparisonOpenDialog(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }
  comparisonRef.value.openDialog(ids);
}
/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 删除中医处方 */
function handleDelete(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      TcmAPI.deleteByIds(ids)
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

/** 分享中医处方 */
function handleShared(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选分享项");
    return;
  }

  ElMessageBox.confirm("确认分享已选中的数据项，一旦分享成功，数据不能修改?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      TcmAPI.sharedTcm(ids)
        .then(() => {
          ElMessage.success("分享成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消分享");
    }
  );
}

// 弹窗
const dialog = reactive({
  id: null as number | null,
  articleId: null as number | null,
  title: "",
  visible: false,
});

/** 打开中医处方弹窗 */
function handleOpenDialog(row: TcmPageVO) {
  console.log(row);
  dialog.id = row.id as number;
  dialog.title = row.titleCn || "";
  dialog.articleId = row.articleId ?? null;
  dialog.visible = true;
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.clickable-title {
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  /* color: blue;  默认颜色 */
  /* text-decoration: underline; 添加下划线 */
  transition: color 0.1s; /* 添加颜色过渡效果 */
}

/* 鼠标悬停时改变颜色 */
.clickable-title:hover {
  color: blue; /* 悬停时的颜色 */
}
</style>
